![CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた](https://devio2023-media.developers.io/wp-content/uploads/2013/03/MUELLER-GRID-SYSTEM.png)
CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた
みなさまこんにちわ。
Webサイト高速化やSCSSの連載を書いている野中です。
そういえばGoogle Readerが終了するとのことでとても残念ですね。
読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。
そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。
とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。
本題
それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。
個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。
ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。
最初はProfound Gridを試して解説記事を書こうと思ったのですが、あまりにも多いので何が良さそうなのか目星をつけるために今回はレイアウト系CSSフレームワークについてまとめてみました。
1,レイアウト系CSSフレームワークとは
主にグリッドに分割してそれを目安にレイアウトのサイズを制御するものが多いです。
タイポグラフィ関係の制御まで含まれているフレームワークもあります。
参考にProfound Gridのサイト。
グリッドのラインに揃えられた要素によりまとまりが出て美しいですね。
2,レイアウト系CSSフレームワーク一覧
今回はCSSのみのものも含めまとめてみました。
Sass/SCSSまたはLessに○が付いているものはメタ言語での利用が可能なものです。
名前 | 可変 | レスポンシブ | Sass/SCSS | Less | IEサポート | 補足 |
---|---|---|---|---|---|---|
960 Grid System | × | × | × | × | IE7+ | 960px 12 and 16 columns |
EZ-CSS | ○ | × | × | × | IE5.5+ | flexible table less layout |
Less Framework 4 | ○ | ○ | × | × | IE6+ | single grid, composed of 68 px columns with 24 px gutters. |
Foundation | ○ | ○ | × | × | IE9+ | Flexible, efficient layout. |
Skeleton | ○ | ○ | × | × | IE7+ | 960 grid base flexible layout |
Amazium | ○ | ○ | × | × | IE7+ | width over 960px max 1200px grid |
Fluid baseline grid | ○ | ○ | × | × | IE6+ | fluid-column layouts, baseline grids and mobile-first responsive |
Columnal | ○ | ○ | × | × | IE9+(IE6-8) | 1140px wide, fluid layout |
1140 CSS GRID | ○ | ○ | × | × | IE7+ | 12 columns fluid grid |
BluCSS | ○ | ○ | × | × | IE7+ | |
Gridless | ○ | ○ | × | × | IE6+ | mobile first responsive |
YAML CSS Framework | ○ | ○ | × | × | IE6+ | Bulletproof flexible grid system |
YUI CSS Grids | ○ | ○ | × | × | IE6+ | - |
Toast | ○ | ○ | × | × | IE8+ | 4 columns simple grid |
TitanTHEMES A CSS framework | ○ | ○ | × | × | IE7+ | 960.gs互換 Responsive 12 and 16 columns |
The Goldilocks Approach | ○ | ○ | × | × | IE7+ | Responsive |
Simple Grid | ○ | ○ | × | × | IE8+ | 1140px 12 clumns |
Proportional Grids | ○ | ○ | × | × | IE7+ | fixed and fluid columns |
Kube CSS-framework | × | × | × | ○ | IE8+ | simple grid |
rwdgrid | ○ | ○ | × | × | IE7+ | max 1200px 12colums and 16colums. 960gs互換 |
One% CSS Grid | ○ | ○ | × | × | IE7+ | 12 column fluid CSS grid system |
BlueTrip | × | × | × | × | IE6+ | 12 column fluid CSS grid system |
xy.css | ○ | ○ | × | × | ×(IE10?) | esponsive liquid matrix. 少し異色で縦軸のグリッドにも対応。 |
BASE | ○ | ○ | × | ○ | IE7+ | 12 column fluid grid |
Blueprint CSS Framework | ○ | × | △ | × | IE7+ | easy-to-use grid. Compassで利用可能 |
Bourbon Neat | ○ | ○ | ○ | × | IE8+ | Bourbonが必要。 |
FRAMELESS | ○ | ○ | ○ | ○ | IE9+(EI6-8) | fluid grids |
unsemantic | ○ | ○ | × | × | IE7+ | Sassで構築されているのでカスタマイズ可能 |
inuit.css | ○ | ○ | ○ | × | IE7+ | - |
320 and Up | ○ | ○ | ○ | ○ | IE9+ | 480, 600, 768, 992 and 1382px |
Golden Grid System | ○ | ○ | ○ | ○ | IE9+(IE6-8) | 18 even columns |
Semantic | ○ | ○ | ○ | ○ | IE6+ | |
Profound Grid | ○ | ○ | ○ | × | IE9+ | 自由度が高いがIE9以上 |
MUELLER GRID SYSTEM | ○ | ○ | ○ | × | IE7+ | IEのサポートも含め一番使い勝手が良いかもしれない |
Bootstrap | ○ | ○ | ○ | ○ | IE7+ | gridも含まれていますがかなり装飾されているので例外ですが紹介。 |
IEの対応は調査不足の部分もあるので目安程度としてください。
2.1,古いIE(6,7,8)の対応
古いIEは@mediaが使えないのでこの点はRespond.jsなどで対処します。
また、IE9以上となっているフレームワークでもCSS3の疑似要素を使っているためでありIE9jsなどを読み込めば利用できるフレームワークもあります。
3,個人的に良いかもと思ったフレームワーク
良さそうだなと思ったフレームワークはこの5つ。
どれもSass/SCSS前提のものですが自由度も高く使い方を理解すればとても便利なフレームワークだと思います。
名前 | 可変 | レスポンシブ | Sass/SCSS | Less | IEサポート | 補足 |
---|---|---|---|---|---|---|
Profound Grid | ○ | ○ | ○ | × | IE9+ | 自由度が高いがIE9以上 |
Bourbon Neat | ○ | ○ | ○ | × | IE8+ | Bourbonが必要。 |
Semantic | ○ | ○ | ○ | ○ | IE6+ | |
Golden Grid System | ○ | ○ | ○ | ○ | IE9+(IE6-8) | 18 even columns |
MUELLER GRID SYSTEM | ○ | ○ | ○ | × | IE7+ | IEのサポートも含め一番使い勝手が良いかもしれない |
まとめ
ある程度は候補を絞り込めましたがあとは使ってみないとわかりませんね。
次回上記に上げた良さそうなものから1つ選んで解説してみたいと思います。
候補にあげたもの、またはそれ以外でオススメのフレームワークがあれば紹介していただけるとうれしいです。
それではまた次回。